<template>
	<div>
		<v-scroll :on-refresh="onRefresh" :on-infinite="onInfinite" ref="refresh">
			<!--<ul>
				<li v-for="(item,index) in listdata">{{item.name}}</li>
				<div></div>
				<li v-for="(item,index) in downdata">{{item.name}}</li>
			</ul>-->
			<div v-for="(item, index) in listdata">
				<div>{{index + 1}}.{{item.title}}</div>
				<!--<news1 v-if="isFirst(index)" :item="item" ></news1>
				<news2 v-else :item="item"></news2>-->
				<div class="dashed"></div>
			</div>
		</v-scroll>
	</div>
</template>
<script>
	import { mapState } from 'vuex'
	import store from '@/store'
	import Scroll from '@/components/common/refresh'
	import News1 from '@/components/main/news1'
	import News2 from '@/components/main/news2'
	export default {
		data() {
			return {
				page: 1
			}
		},
		components: {
			news1: News1,
			news2: News2
		},
		computed: {
			...mapState({
				listdata: state => state.list,
			})
		},
		mounted: function() {
			this.refreshData();
		},
		methods: {
			isFirst: function(index) {
				if(index == 0) {
					return true
				}
				return false
			},
			refreshData(done) {
				this.page = 1
				this.getData(done)
				//重置加载更多
				this.$refs.refresh.infiniteDone()
			},
			loadData(done) {
				this.page++
					this.getData(done)
			},
			getData(done) {
				this.$refs.refresh.setLoadMoreText("加载中...")
				console.log('get  data... page=', this.page)
				let url = 'http://vxinghe.com/m/index.php?c=home&a=lists&json=1&page=' + this.page + '&id=16'
				this.$http.jsonp(url).then(function(response) {
					var arr = store.state.list
					let data = response.data
					if(this.page == 1) {
						arr = []
					}
					arr.push.apply(arr, data)
					store.commit('updateList', arr)
					if(data.length < 10) {
						this.$refs.refresh.setLoadMoreText("已加载全部")
						return;
					} else {
						this.$refs.refresh.setLoadMoreText("加载更多")
					}
					done()
				}).catch(function(response) {
					console.log("error: ", response)
				})
			},
			onRefresh(done) {
				this.refreshData(done);
			},
			onInfinite(done) {
				console.log(123)
				this.loadData(done)
			}
		},
		components: {
			'v-scroll': Scroll
		}
	}
</script>